<template>
  <div class="login-body">
    <div class="login-panel">
      <div class="login-title">用户登录</div>
      <el-form ref="formDataRef" :model="formData" :rules="rules">
        <el-form-item prop="account">
          <el-input
            placeholder="请输入账号"
            v-model="formData.account"
            size="large"
            @keydown.enter="login"
            ><template #prefix
              ><span class="iconfont icon-account"></span></template
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="请输入密码"
            v-model="formData.password"
            show-password
            size="large"
            @keydown.enter="login"
            ><template #prefix
              ><span class="iconfont icon-password"></span></template
          ></el-input>
        </el-form-item>
        <el-form-item prop="checkCode">
          <div class="check-code-panel">
            <el-input
              placeholder="请输入验证码"
              v-model="formData.checkCode"
              class="input-panel"
              size="large"
              @keydown.enter="login"
            />
            <img
              :src="checkCodeUrl"
              class="check-code"
              @click="changeCheckCode"
            />
          </div>
        </el-form-item>
        <el-form-item label="">
          <el-checkbox
            v-model="formData.rememberMe"
            :border="true"
            label="true"
            size="large"
            >记住我</el-checkbox
          >
        </el-form-item>
        <el-form-item label="">
          <el-button
            type="primary"
            :style="{ width: '100%' }"
            color="#6790ca"
            size="large"
            plain
            @click="login"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import md5 from "js-md5";
import { getCurrentInstance, reactive, ref } from "vue";
import VueCookies from "vue-cookies";
import { useRouter } from "vue-router";
const {proxy} = getCurrentInstance();
const router = useRouter();

const api = {
  checkCode: "api/checkCode",
  login: "/login",
};

const checkCodeUrl = ref(api.checkCode + "?" + new Date().getTime());

const changeCheckCode = () => {
  checkCodeUrl.value = api.checkCode + "?" + new Date().getTime();
};

//表单
const formDataRef = ref(null);
const formData = reactive({});

const init = () => {
  const loginInfo = VueCookies.get("loginInfo");
  
  if(!loginInfo){
    return;
  }
  Object.assign(formData,loginInfo);

}

init();


const rules = {
  account: [
    {
      required: true, //数据必须
      message: "请输入用户名", //提示信息
    },
  ],
  password: [
    {
      required: true,
      message: "请输入密码",
    },
  ],
  checkCode: [
    {
      required: true,
      message: "请输入验证码",
    },
  ],
};

const login = () => {
  formDataRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }

    let cookieLoginInfo = VueCookies.get("loginInfo");
    let cookiePassword = cookieLoginInfo == null ? null : cookieLoginInfo.password;

    if(formData.password !== cookiePassword){
      formData.password = md5(formData.password);
    }
    
    let params = {
      account: formData.account,
      password: formData.password,
      checkCode: formData.checkCode,
    };

    let result = await proxy.Request({
      url: api.login,
      params: params,
      errorCallback: () => {
        changeCheckCode();
      }
    });
    
    if(!result) {
      return;
    }

    proxy.Message.success("登录成功");

    setTimeout(()=>{
      router.push("/");
    },1500)

    const loginInfo = {
      account: params.account,
      password: params.password,
      rememberMe: formData.rememberMe,
    }
    VueCookies.set("userInfo",result.data,0);
    if(formData.rememberMe){
      VueCookies.set("loginInfo",loginInfo,'7d');
    }

  });
};
</script>

<style scoped lang="scss">
.login-body {
  width: 100%;
  height: calc(100vh);
  background-size: cover;
  background-position: center;
  background-image: url(@/assets/login-bg.jpg);
}
.login-title {
  text-shadow: 0px 0px 0.5em #fff, 0px 0px 0.5em #fff;
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  margin-bottom: 10px;
}
.check-code-panel {
  width: 100%;
  display: flex;
  align-items: center;
  .input-panel {
    flex: 1;
    margin-right: 5px;
  }
  .check-code {
    cursor: pointer;
  }
}
.login-panel {
  float: right;
  margin-top: 15vh;
  margin-right: 15%;
  padding: 20px;
  width: 350px;
  background: rgba(255, 255, 255, 0);
  border-radius: 15px;
  transition: 0.5s ease;
}
.login-panel:hover {
  background: rgba(255, 255, 255, 0.75);
  box-shadow: 0px 0px 200px #fff;
}
</style>